
<style>
    /* th, td {
         white-space: nowrap;
     }

     div.dataTables_wrapper {
         width: 100%;
         margin: 0 auto;
     }*/

    .tabliv {
        display: none;
    }


    .tabliv > table th, .tabliv > table td {
        padding: 8px;
        border-bottom: 1px solid #555;
    }
    .sort-icon{ 
        width: 16px; 
        height: 16px; 
        margin-left: 5px;
        margin-top: -2px;
        background: url("__PUBLIC__/yksui/images/sort1.png") no-repeat center center; 
        display: inline-block;
        vertical-align: middle;
    }
</style>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">FBA库存销量列表</h3></div>
            <div class="panel-body">
                <form id="form" action="__URL__/exportReport" method="POST">
                    <input id="order" type="hidden" value="">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="col-sm-12 col-md-5  add-space">
                                    <div class="input-group input-group-md">
                                        <input name="page" id="page" type="hidden"  />
                                        <span class="input-group-addon">帐号</span>
                                        <select class="chosen-select form-control" tabindex="-1" name="accountId"
                                                data-name-group="common">
                                            <option value="" class="empty-opt">-- 请选择 --</option>
                                            <volist name="accounts" id="vo">
                                                <option value="{$vo.id}">
                                                {$vo.name}
                                                </option>
                                            </volist>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-5  add-space">
                                    <div class="input-group input-group-md">
                                        <span class="input-group-addon">SKU</span>
                                        <input class="form-control " placeholder="请输入内容" name="sku"
                                               data-name-group="" type="text" value="">
                                    </div>
                                </div>
                                <div class="col-md-2 add-space">
                                    <input id="select" class="btn btn-primary jsSearchBtn" type="button" value="搜索">
                                    <input id="download" class="btn btn-primary jsSearchBtn" type="submit" value="下载">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <hr>
                <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>帐号</th>
                        <th>公司SKU</th>
                        <th>产品名称</th>
                        <th id="daysale" class="ord">FBA最近七天日销量<i class="sort-icon"></i></th>
                        <th id="stock" class="ord">FBA可用库存<i class="sort-icon"></i></th>
                        <th id="shipping" class="ord">FBA在途库存<i class="sort-icon"></i></th>
                    </tr>
                    </thead>
                    <tbody id="pageData">
                    </tbody>
                </table>
                <div id="pagecount"></div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('select.chosen-select').chosen({
            no_results_text:'没有找到',   // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 2个以下的选择项则不显示检索框
            search_contains: true        // 从任意位置开始检索
        });
    });
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#page').val(1);

        getData();

        $('#pagecount').on('click','span a',function(){
            var rel = $(this).attr("rel");
            $('#page').val(rel);
            getData();
        })

        $("#select").click(function(){
            $('#page').val(1);
            getData();
        })

        $(".ord").click(function(){
            var name = $(this).attr("id");
            if($("#order").val() == ''){
                $("#order").val(name+":ASC");
            }else if($("#order").val() == (name+":ASC")){
                $("#order").val(name+":DESC");
            }else
                $("#order").val(name+":ASC");
            $("#order").attr("name","order");
            getData();
        })
    })

    /**
     * 获取当页数据
     */
    function getData(){

        $.ajax({
            type: 'POST',
            url: '__URL__/getReport',
            data: $('#form').serialize(),
            dataType:'json',
            success:function(arr){
                total = arr.total; //总记录数

                pageSize = arr.pageSize; //每页显示条数
                curPage = arr.page; //当前页
                totalPage = arr.totalPage; //总页数
                var list = arr.reportDataLists;

                content = '';
                if(typeof(list) == "undefined"){
                    content = '';
                }
                else{
                    i=0;
                    $.each(list,function(index,array){ //遍历json数据列
                        if(array['skucnname'] == undefined) array['skucnname'] = '';
                        ++i;
                        content += "<tr>";
                        content += "<td>"+i+"</td>";
                        content += "<td>"+array['name']+"</td>";//账号名
                        content += "<td>"+array['sku']+"</td>";
                        content += "<td>"+array['skucnname']+"</td>";
                        content += "<td>"+array['daysale']+"</td>";
                        content += "<td>"+array['stock']+"</td>";
                        content += "<td>"+array['shipping']+"</td>";

                    });

                }
                $('#pageData').html(content);

            },
            complete:function(){ //生成分页条
                getPage();
            },
            error:function(){
                alert("数据加载失败");
            }
        });
    }

    /**
     * 分页展示
     */
    function getPage(){

        if(curPage>totalPage)curPage=totalPage;
        if(curPage<1)curPage=1;
        pageStr="<span class='span'>共"+total+"条</span><span class='span'>"+curPage+"/"+totalPage+"</span>"
        if(curPage==1){
            pageStr += "<span class='span'>首页</span><span class='span'>上一页</span>";
        }else{
            pageStr += "<span><a class='a' href='javascript:void(0)' rel='1'>首页</a></span>" +
                    "<span><a class='a' href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"
        }
        if(curPage>=totalPage){
            pageStr += "<span class='span'>下一页</span><span class='span'>尾页</span>";
        }else{
            pageStr += "<span><a class='a' href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span>" +
                    "<span><a class='a' href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
        }
        $("#pagecount").html(pageStr);
    }
</script>